<!DOCTYPE html>
<html lang="zh-CN" class="h-[100%] overflow-hidden select-none">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="./output.css" rel="stylesheet">
	<title>ADS|BOE</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}
	</style>
	<script>
		function setRemUnit() {
			const designWidth = 10800; // 设计稿宽度
			const html = document.documentElement;
			const clientWidth = html.clientWidth;
			const rem = clientWidth / designWidth; // 1px = 1rem
			html.style.fontSize = rem + 'px';
		}

		window.addEventListener('resize', setRemUnit);
		window.addEventListener('load', setRemUnit);
	</script>
	<script src="./lib/jquery-3.6.0.min.js"></script>
	<script src="./lib/gsap.min.js"></script>
	<!-- <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/Flip.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/Observer.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/Draggable.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/MotionPathPlugin.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/EaselPlugin.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/PixiPlugin.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/TextPlugin.min.js"></script> -->


	<!-- RoughEase, ExpoScaleEase and SlowMo are all included in the EasePack file -->
	<!-- <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/EasePack.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/CustomEase.min.js"></script> -->

	<script>
		let loaded = false
		document.addEventListener("DOMContentLoaded", (event) => {
			// gsap.registerPlugin(Flip, ScrollTrigger, Observer, ScrollToPlugin, Draggable, MotionPathPlugin, EaselPlugin, PixiPlugin, TextPlugin, RoughEase, ExpoScaleEase, SlowMo, CustomEase)
			gsap.config({
				autoSleep: 60,
				force3D: true,
			});

			// setTimeout(() => {
			// 第一次启动动画
			const initAnimation = () => {
				let initTimeLine = gsap.timeline({

				})
				loaded = true
				// initTimeLine.to('#loading', {
				// 	opacity: 0,
				// 	duration: 0.5,
				// })

				initTimeLine.fromTo("#bg", {
					opacity: 0,
				}, {
					opacity: 1,
					duration: 10,
				})

				initTimeLine.fromTo("#spot", {
					opacity: 0,
				}, {
					opacity: 1,
					duration: 5,
				}, 1)

				initTimeLine.fromTo("#ground", {
					translateY: '100%',
				}, {
					translateY: '0%',
					duration: 1,
				}, 1)

				initTimeLine.fromTo("#s1", {
					opacity: 0,
					scale: 0,
				}, {
					opacity: 1,
					scale: 1,
					duration: 2.5,
				}, 2)

				initTimeLine.fromTo(".city", {
					opacity: 0,
					backgroundPositionY: '1294rem',
				}, {
					opacity: 1,
					backgroundPositionY: '0rem',
					duration: 1,
					stagger: 0.2
				}, 2);

				initTimeLine.fromTo(".city-mirror", {
					opacity: 0,
					backgroundPositionY: '-840rem',
				}, {
					opacity: 1,
					backgroundPositionY: '0rem',
					duration: 1,
					stagger: 0.2
				}, '<');

				// gen1 gen3 从下往上
				initTimeLine.fromTo('#gen1 .boe-description, #gen3 .boe-description', {
					opacity: 0,
					translateY: '3840rem'
				}, {
					opacity: 1,
					translateY: '0rem',
					duration: 0.5,
				}, 3)

				initTimeLine.fromTo('#gen1 .boe-light, #gen3 .boe-light', {
					opacity: 0,
					translateY: '3840rem'
				}, {
					opacity: 1,
					translateY: '0rem',
					duration: 0.5,
				}, 3.1)

				initTimeLine.fromTo('#gen1 .boe-params .slide-up, #gen3 .boe-params .slide-up', {
					opacity: 0,
					translateY: '3840rem'
				}, {
					opacity: 1,
					translateY: '0rem',
					duration: 0.5,
					stagger: 0.1
				}, 3.1)

				initTimeLine.fromTo('#gen1 .boe-bubble, #gen3 .boe-bubble', {
					opacity: 0,
					translateY: '3840rem'
				}, {
					opacity: 1,
					translateY: '0rem',
					duration: 0.5,
				}, 3.5)

				initTimeLine.fromTo('#gen1 .boe-bubble-content, #gen3 .boe-bubble-content', {
					opacity: 0,
					scale: 0
				}, {
					opacity: 1,
					scale: 1,
					duration: 0.5,
				}, 4)

				// gen2 gen4 从下往上
				initTimeLine.fromTo('#gen2 .boe-description, #gen4 .boe-description', {
					opacity: 0,
					translateY: '-3840rem'
				}, {
					opacity: 1,
					translateY: '0rem',
					duration: 0.5,
				}, 3)

				initTimeLine.fromTo('#gen2 .boe-light, #gen4 .boe-light', {
					opacity: 0,
					translateY: '-3840rem'
				}, {
					opacity: 1,
					translateY: '0rem',
					duration: 0.5,
				}, 3.1)

				initTimeLine.fromTo('#gen2 .boe-params .slide-up, #gen4 .boe-params .slide-up', {
					opacity: 0,
					translateY: '-3840rem'
				}, {
					opacity: 1,
					translateY: '0rem',
					duration: 0.5,
					stagger: 0.1
				}, 3.1)

				initTimeLine.fromTo('#gen2 .boe-bubble, #gen4 .boe-bubble', {
					opacity: 0,
					translateY: '-3840rem'
				}, {
					opacity: 1,
					translateY: '0rem',
					duration: 0.5,
				}, 3.5)

				initTimeLine.fromTo('#gen2 .boe-bubble-content, #gen4 .boe-bubble-content', {
					opacity: 0,
					scale: 0
				}, {
					opacity: 1,
					scale: 1,
					duration: 0.5,
				}, 4)

				// initTimeLine.fromTo(".slide-up", {
				// 	opacity: 0,
				// 	translateY: '3840rem'
				// }, {
				// 	opacity: 1,
				// 	translateY: '0rem',
				// 	duration: 0.5,
				// 	stagger: 0.1
				// }, 3)
			}
			initAnimation()




			// ADS主产品展示
			let mainProductShownd = false
			let s1TimeLine = gsap.timeline({ paused: true })
			s1TimeLine.to('.main-product-item', {
				translateY: '0rem',
				duration: 0.5,
				stagger: 0.1
			})
			// s1TimeLine.pause()
			// s1TimeLine.reverse()
			document.getElementById('s1').addEventListener('click', () => {
				if (!mainProductShownd) {
					s1TimeLine.play()
					mainProductShownd = true
				} else {
					// s1TimeLine.reverse()
					// mainProductShownd = false
				}
			})

			// GEN1展示
			let gen1Focused = false
			let gen1TimeLine = gsap.timeline({ paused: true })

			gen1TimeLine.to('#gen1-focus .product-item', {
				translateY: '0rem',
				duration: 0.5,
				stagger: 0.01
			})

			gen1TimeLine.to('#gen2', {
				opacity: 0.01,
				duration: 0.5,
			}, '<')

			gen1TimeLine.to('#gen3', {
				opacity: 0.25,
				duration: 0.5,
			}, '<')

			gen1TimeLine.to('#gen4', {
				opacity: 0.25,
				duration: 0.5,
			}, '<')

			gen1TimeLine.to('#gen1', {
				zIndex: 20,
				duration: 0.5,
			}, '<')

			gen1TimeLine.to('#gen1-focus', {
				zIndex: 10,
				opacity: 1,
				duration: 0.5,
			}, '<')

			gen1TimeLine.from('#gen1-focus .focus-content-l', {
				translateX: '-100%'
			}, '<')

			gen1TimeLine.from('#gen1-focus .focus-content-r', {
				translateX: '100%'
			}, '<')

			gen1TimeLine.to('#gen1 .boe-description', {
				opacity: 0,
				duration: 0.1,
			}, '<')

			gen1TimeLine.to('#gen1 .boe-bubble', {
				translateY: '-1000rem',
				duration: 0.5,
			}, '<')

			gen1TimeLine.to('#gen1 .boe-bubble-lightring', {
				opacity: 0.8,
				duration: 0.5,
			}, '<')

			gen1TimeLine.to('#gen1 .boe-bubble-gen', {
				scale: 1,
				translateY: '60rem',
				duration: 0.5,
			}, '<')
			gen1TimeLine.to('#gen1 .boe-bubble-title', {
				scale: 1.2,
				translateY: '100rem',
				duration: 0.5,
			}, '<')
			gen1TimeLine.to('#gen1 .boe-bubble-icons', {
				opacity: 0,
				duration: 0.5,
			}, '<')
			gen1TimeLine.to('#gen1 .boe-bubble-description', {
				fontSize: '56rem',
				translateY: '-100rem',
				duration: 0.5,
			}, '<')
			gen1TimeLine.to('#gen1 .boe-light', {
				opacity: 0,
				translateY: '1000rem',
				duration: 0.25,
			}, '<')
			gen1TimeLine.to('#gen1 .boe-params', {
				opacity: 0,
				duration: 0.25,
			}, '<')
			gen1TimeLine.to('#gen1 .boe-params', {
				translateY: '1300rem',
				opacity: 1,
				duration: 0.25,
			}, '>')
			gen1TimeLine.to('#gen1 .boe-light', {
				opacity: 1,
				translateY: '2000rem',
				duration: 0.25,
			}, '<')

			// gen1TimeLine.pause()
			// gen1TimeLine.reverse()
			document.getElementById('gen1').addEventListener('click', () => {
				if (!gen1Focused) { // GEN获得焦点展示
					gen1TimeLine.play()
					gen1Focused = true
					$('#bubble-1').removeClass('animate-bubble')
				} else { // GEN失去焦点展示

					// gen1TimeLine.reverse()
					// gen1Focused = false
				}
			})

			// GEN2展示
			let gen2Focused = false
			let gen2TimeLine = gsap.timeline({ paused: true })



			gen2TimeLine.to('#gen2 .boe-description', {
				opacity: 0,
				duration: 0.1,
			}, '<')

			gen2TimeLine.to('#gen2', {
				translateY: '0rem',
				translateX: '2100rem',
				duration: 0.5,
			}, '<')

			gen2TimeLine.to('#gen2 .boe-bubble-lightring', {
				opacity: 0.8,
				duration: 0.5,
			}, '<')

			gen2TimeLine.to('#gen2 .boe-bubble-gen', {
				translateY: '60rem',
				duration: 0.5,
			}, '<')
			gen2TimeLine.to('#gen2 .boe-bubble-title', {
				scale: 1.2,
				translateY: '100rem',
				duration: 0.5,
			}, '<')
			gen2TimeLine.to('#gen2 .boe-bubble-icons', {
				opacity: 0,
				duration: 0.5,
			}, '<')
			gen2TimeLine.to('#gen2 .boe-bubble-description', {
				fontSize: '56rem',
				translateY: '-100rem',
				duration: 0.5,
			}, '<')
			gen2TimeLine.to('#gen2 .boe-light', {
				translateY: '250rem',
				duration: 0.5,
			}, '<')
			gen2TimeLine.to('#gen2 .boe-params', {
				translateY: '150rem',
				duration: 0.5,
			}, '<')
			// gen1TimeLine.to('#gen1 .boe-params', {
			// 	translateY: '1300rem',
			// 	opacity: 1,
			// 	duration: 0.25,
			// }, '>')
			// gen1TimeLine.to('#gen1 .boe-light', {
			// 	opacity: 1,
			// 	translateY: '2000rem',
			// 	duration: 0.25,
			// }, '<')

			gen2TimeLine.to('#gen2-focus', {
				zIndex: 10,
				opacity: 1,
				duration: 0.5,
			}, '<')

			gen2TimeLine.from('#gen2-focus .focus-content-l', {
				translateX: '-100%'
			}, '<')

			gen2TimeLine.from('#gen2-focus .focus-content-r', {
				translateX: '100%'
			}, '<')

			gen2TimeLine.from('#gen2-focus .focus-content-b', {
				translateY: '100%'
			}, '<')

			gen2TimeLine.to('#gen2', {
				zIndex: 20,
				duration: 0.5,
			}, '<')

			gen2TimeLine.to('#gen2-focus .product-item', {
				translateY: '0rem',
				duration: 0.5,
				stagger: 0.01
			}, '<')

			gen2TimeLine.to('#gen1', {
				opacity: 0.01,
				duration: 0.5,
			}, '<')

			gen2TimeLine.to('#gen3', {
				opacity: 0.01,
				duration: 0.5,
			}, '<')

			gen2TimeLine.to('#gen4', {
				opacity: 0.25,
				duration: 0.5,
			}, '<')


			// gen2TimeLine.pause()
			// gen2TimeLine.reverse()
			document.getElementById('gen2').addEventListener('click', () => {
				if (!gen2Focused) { // GEN获得焦点展示
					gen2TimeLine.play()
					gen2Focused = true
					$('#bubble-2').removeClass('animate-bubble')
				} else { // GEN失去焦点展示
					// gen2TimeLine.reverse()
					// gen2Focused = false
				}
			})


			// GEN3展示
			let gen3Focused = false
			let gen3TimeLine = gsap.timeline({ paused: true })

			gen3TimeLine.to('#gen3-focus .product-item', {
				translateY: '0rem',
				duration: 0.2,
				stagger: 0.01,
				ease: "power2.out"
			}, '<')

			gen3TimeLine.to('#gen1', {
				opacity: 0.01,
				duration: 0.5,
			}, '<')

			gen3TimeLine.to('#gen2', {
				opacity: 0.01,
				duration: 0.5,
			}, '<')

			gen3TimeLine.to('#gen4', {
				opacity: 0.25,
				duration: 0.5,
			}, '<')

			gen3TimeLine.to('#gen3', {
				// zIndex: 20,
				duration: 0.5,
			}, '<')

			gen3TimeLine.to('#gen3-focus', {
				// zIndex: 10,
				opacity: 1,
				duration: 0.5,
			}, '<')

			gen3TimeLine.from('#gen3-focus .focus-content-l', {
				translateX: '-100%'
			}, '<')

			gen3TimeLine.from('#gen3-focus .focus-content-r', {
				translateX: '100%'
			}, '<')

			gen3TimeLine.to('#gen3 .boe-description', {
				opacity: 0,
				duration: 0.1,
			}, '<')

			gen3TimeLine.to('#gen3 .boe-bubble', {
				translateY: '-1000rem',
				duration: 0.5,
			}, '<')

			gen3TimeLine.to('#gen3 .boe-bubble-lightring', {
				opacity: 0.8,
				duration: 0.5,
			}, '<')

			gen3TimeLine.to('#gen3 .boe-bubble-gen', {
				scale: 1,
				translateY: '60rem',
				duration: 0.5,
			}, '<')
			gen3TimeLine.to('#gen3 .boe-bubble-title', {
				scale: 1.2,
				translateY: '100rem',
				duration: 0.5,
			}, '<')
			gen3TimeLine.to('#gen3 .boe-bubble-icons', {
				opacity: 0,
				duration: 0.5,
			}, '<')
			gen3TimeLine.to('#gen3 .boe-bubble-description', {
				fontSize: '56rem',
				translateY: '-100rem',
				duration: 0.5,
			}, '<')
			gen3TimeLine.to('#gen3 .boe-light', {
				opacity: 0,
				translateY: '1000rem',
				duration: 0.25,
			}, '<')
			gen3TimeLine.to('#gen3 .boe-params', {
				opacity: 0,
				duration: 0.25,
			}, '<')
			gen3TimeLine.to('#gen3 .boe-params', {
				translateY: '1300rem',
				opacity: 1,
				duration: 0.25,
			}, '<')
			gen3TimeLine.to('#gen3 .boe-light', {
				opacity: 1,
				translateY: '2000rem',
				duration: 0.25,
			}, '<')

			// gen3TimeLine.pause()
			// gen3TimeLine.reverse()
			document.getElementById('gen3').addEventListener('click', () => {
				if (!gen3Focused) { // GEN获得焦点展示
					gen3TimeLine.play()
					gen3Focused = true
					$('#bubble-3').removeClass('animate-bubble')
				} else { // GEN失去焦点展示
					// gen3TimeLine.reverse()
					// gen3Focused = false
				}
			})

			// GEN4展示
			let gen4Focused = false
			let gen4TimeLine = gsap.timeline({ paused: true })

			gen4TimeLine.to('#gen4-focus', {
				opacity: 1,
				duration: 0.5,
			})

			gen4TimeLine.from('#gen4-focus .focus-content-l', {
				translateX: '-100%'
			}, '<')

			gen4TimeLine.from('#gen4-focus .focus-content-r', {
				translateX: '100%'
			}, '<')

			gen4TimeLine.from('#gen4-focus .focus-content-t', {
				translateY: '-100%'
			}, '<')

			gen4TimeLine.to('#gen4-focus .product-item', {
				translateY: '0rem',
				duration: 0.2,
				stagger: 0.01,
				ease: "power2.out"
			}, '<')

			gen4TimeLine.to('#gen1', {
				opacity: 0.01,
				duration: 0.5,
			}, '<')

			gen4TimeLine.to('#gen2', {
				opacity: 0.01,
				duration: 0.5,
			}, '<')

			gen4TimeLine.to('#gen3', {
				opacity: 0.01,
				duration: 0.5,
			}, '<')

			gen4TimeLine.to('#gen4', {
				duration: 0.5,
			}, '<')



			gen4TimeLine.to('#gen4 .boe-description', {
				opacity: 0,
				duration: 0.1,
			}, '<')

			gen4TimeLine.to('#gen4 .boe-bubble-lightring', {
				opacity: 0.8,
				duration: 0.5,
			}, '<')

			gen4TimeLine.to('#gen4 .boe-bubble-gen', {
				scale: 1,
				translateY: '60rem',
				duration: 0.5,
			}, '<')
			gen4TimeLine.to('#gen4 .boe-bubble-title', {
				scale: 1,
				translateY: '120rem',
				duration: 0.5,
			}, '<')
			gen4TimeLine.to('#gen4 .boe-bubble-icons', {
				opacity: 0,
				duration: 0.5,
			}, '<')

			gen4TimeLine.to('#gen4 .boe-params', {
				translateY: '200rem',
				duration: 0.5,
			}, '<')
			gen4TimeLine.to('#gen4 .boe-light', {
				translateY: '200rem',
				duration: 0.5,
			}, '<')



			// gen4TimeLine.pause()
			// gen4TimeLine.reverse()
			document.getElementById('gen4').addEventListener('click', () => {
				if (!gen4Focused) { // GEN获得焦点展示
					$('#gen4-focus').css('opacity', 0.001)
					gen4TimeLine.play()
					gen4Focused = true
					$('#bubble-4').removeClass('animate-bubble')
				}
			})

			document.addEventListener('click', function (event) {
				if (mainProductShownd || gen1Focused || gen2Focused || gen3Focused || gen4Focused) {
					$('#bubble-1, #bubble-2, #bubble-3, #bubble-4').addClass('animate-bubble')
					event.stopPropagation(); // 阻止事件进一步传播
					if (mainProductShownd) {
						s1TimeLine.reverse()
						mainProductShownd = false
					}
					if (gen1Focused) {
						gen1TimeLine.reverse()
						gen1Focused = false
					}
					if (gen2Focused) {
						gen2TimeLine.reverse()
						gen2Focused = false
					}
					if (gen3Focused) {
						gen3TimeLine.reverse()
						gen3Focused = false
					}
					if (gen4Focused) {
						gen4TimeLine.reverse()
						gen4Focused = false
					}
				}

			}, true); // 使用捕获阶段以确保事件在到达目标之前就被处理

			setTimeout(() => {
				// s1TimeLine.reverse()
				// gen1TimeLine.reverse()
				// gen2TimeLine.reverse()
				// gen3TimeLine.reverse()

			}, 10000)

			// }, 1000)
		});

	</script>
</head>

<body class="h-[100%] overflow-hidden bg-gray-900">
	<!-- <div id="loading" class="loading absolute left-0 right-0 bottom-0 top-0 bg-[#00004a] z-50"></div> -->
	<svg width="0" height="0">
		<filter id="divide">
			<feComponentTransfer>
				<feFuncR type="table" tableValues="1 0" />
				<feFuncG type="table" tableValues="1 0" />
				<feFuncH type="table" tableValues="1 0" />
			</feComponentTransfer>
		</filter>
	</svg>
	<!-- <div class="absolute top-[0rem] bottom-[0rem] w-[32rem] bg-green-400 left-[2144rem] z-50"></div>
	<div class="absolute top-[0rem] bottom-[0rem] w-[32rem] bg-green-400 left-[4304rem] z-50"></div>
	<div class="absolute top-[0rem] bottom-[0rem] w-[32rem] bg-green-400 left-[6464rem] z-50"></div>
	<div class="absolute top-[0rem] bottom-[0rem] w-[32rem] bg-green-400 left-[8624rem] z-50"></div> -->
	<div class="absolute top-[50%] -mt-[1920rem] w-[10800rem] h-[3840rem] bg-[#00006a] flex overflow-hidden">
		<div id="bg" class="absolute w-full h-full bg-[url('./images/bg.png')] bg-cover z-0 mix-blend-hard-light"></div>
		<div id="ground"
			class="absolute w-full left-0 right-0 bottom-0 h-[428rem] bg-[url('./images/ground.png')] bg-cover"></div>
		<div id="spot"
			class="absolute w-full top-0 left-0 h-full bg-[url('./images/spot.png')] bg-cover mix-blend-hard-light">
		</div>
		<div
			class="city transform-gpu opacity-100 mix-blend-screen overflow-hidden absolute bottom-[395rem] left-[2750rem] w-[3123rem] h-[1294rem] bg-[url('./images/city_1.png')] bg-no-repeat bg-cover ">
		</div>
		<div
			class="city-mirror transform-gpu opacity-100 mix-blend-screen overflow-hidden absolute -bottom-[340rem] left-[2750rem] w-[3123rem] h-[840rem] bg-[url('./images/city_2.png')] bg-no-repeat bg-cover ">
		</div>
		<div
			class="city transform-gpu opacity-100 mix-blend-screen overflow-hidden absolute bottom-[395rem] left-[6583rem] w-[3123rem] h-[1294rem] bg-[url('./images/city_3.png')] bg-no-repeat bg-cover ">
		</div>
		<div
			class="city-mirror transform-gpu opacity-100 mix-blend-screen overflow-hidden absolute -bottom-[340rem] left-[6583rem] w-[3123rem] h-[840rem] bg-[url('./images/city_4.png')] bg-no-repeat bg-cover ">
		</div>

		<div id="s1" class="w-[2160rem] h-[3840rem] flex-shrink-0 flex-grow-0 basis-[2160rem] relative cursor-pointer ">
			<div
				class="absolute left-0 top-[350rem] w-[2341rem] h-[2253rem] bg-[url('./images/circle_1.png')] bg-cover z-0  ">
			</div>
			<img src="./images/s1_logo.png"
				class="w-[1007rem] h-[580rem] mx-auto relative z-10 max-w-[none] block mt-[1180rem]  " />
			<img src="./images/s1_title.png"
				class="w-[1738rem] h-[335rem] mx-auto z-10 relative max-w-[none] block mt-[700rem]" />
			<img src="./images/s1_subtitle.png"
				class="w-[1760rem] h-[266rem] mx-auto z-10 relative max-w-[none] block -mt-[100rem]" />
		</div>
		<div id="gen1" class="w-[2160rem] h-[3840rem] flex-shrink-0 flex-grow-0 basis-[2160rem] relative pt-[160rem]  z-10">
			<div class="boe-description slide-up transform-gpu text-[#70cafe] text-center text-[36rem] mb-[50rem]">MBL
				多点触控显示屏颠覆手机</div>
			<div class="boe-description slide-up transform-gpu text-[#FFFFFF] text-center text-[36rem] mb-[50rem]">
				iPhone取消实体键盘</div>
			<div class="boe-description slide-up transform-gpu text-[#70cafe] text-center text-[36rem] mb-[50rem]">TPC
				出现Tablet Computer</div>
			<div class="boe-description slide-up transform-gpu text-[#FFFFFF] text-center text-[36rem]">iPad original
				开创了先河，Galaxy Tab /
				Galaxy Note 7英寸 /
				10.1英寸尺寸逐年增加</div>
			<img src="./images/light_01.png"
				class="boe-light slide-up transform-gpu w-[1500rem] h-[493rem] mx-auto relative z-10 max-w-[none] block -mt-[150rem] mix-blend-plus-lighter" />
			<div class="boe-params grid grid-cols-2 justify-stretch content-stretch gap-[50rem] -mt-[150rem]">
				<div class="slide-up transform-gpu flex justify-end">
					<img class="w-[714rem] h-[182rem]" src="./images/s2_01.png" />
				</div>
				<div class="slide-up transform-gpu ">
					<img class="w-[714rem] h-[182rem]" src="./images/s2_02.png" />
				</div>
				<div class="slide-up transform-gpu flex justify-end">
					<img class="w-[714rem] h-[182rem]" src="./images/s2_03.png" />
				</div>
				<div class="slide-up transform-gpu ">
					<img class="w-[714rem] h-[182rem]" src="./images/s2_04.png" />
				</div>
			</div>
			<div id="bubble-1" class="animate-bubble">
				<div class="boe-bubble slide-up transform-gpu relative w-[2160rem] h-[1945rem] -mt-[100rem] cursor-pointer">
					<div class="absolute left-0 top-0 bottom-0 right-0 bg-[url('./images/circle_dark.png')] bg-cover opacity-100">
					</div>
					<div
						class="boe-bubble-lightring absolute  -left-[170rem] w-[2500rem] h-[1200rem] -bottom-[220rem]  bg-[url('./images/light_ring_2.png')] bg-contain mix-blend-lighten opacity-0">
					</div>
					<div class="boe-bubble-content relative z-10 pt-[500rem]">
						<img class="boe-bubble-gen slide-up transform-gpu w-[482rem] h-[122rem] mx-auto"
							src="./images/gen_1_01.png" />
						<img class="boe-bubble-title slide-up transform-gpu w-[912rem] h-[117rem] mx-auto mt-[130rem]"
							src="./images/gen_1_02.png" />
						<div
							class="boe-bubble-icons slide-up transform-gpu flex justify-center mt-[130rem] mb-[100rem] space-x-[60rem]">
							<div class="slide-up transform-gpu ">
								<img class="w-[174rem] h-[113rem] aspect-auto mx-auto" src="./images/icon_mbl.png" />
								<div class="text-center text-[#0fe5fe] text-[60rem]">MBL</div>
							</div>
							<div class="slide-up transform-gpu ">
								<img class="w-[174rem] h-[113rem] aspect-auto mx-auto" src="./images/icon_tpc.png" />
								<div class="text-center text-[#0fe5fe] text-[60rem]">TPC</div>
							</div>
						</div>
						<div
							class="boe-bubble-description slide-up transform-gpu text-center text-[#3cb2ff] text-[48rem] mb-[20rem]">
							建立ADS技术体系，攻克技术难题，</div>
						<div class="boe-bubble-description slide-up transform-gpu text-center text-[#3cb2ff] text-[48rem]">
							实现小尺寸量产出货
						</div>
					</div>
				</div>
			</div>
		</div>

		<div id="gen2" class="w-[2160rem] h-[3840rem] flex-shrink-0 flex-grow-0 basis-[2160rem] relative pt-[10rem]  z-10">
			<div id="bubble-2" class="animate-bubble">
				<div class="boe-bubble slide-up relative opacity-100 w-[2160rem] h-[1945rem] cursor-pointer">
					<div class="absolute left-0 top-0 bottom-0 right-0 bg-[url('./images/circle_dark.png')] bg-cover opacity-100">
					</div>
					<div
						class="boe-bubble-lightring absolute -left-[170rem] w-[2500rem] h-[1200rem] -bottom-[220rem] bg-[url('./images/light_ring_2.png')]  bg-contain mix-blend-lighten opacity-0">
					</div>
					<div class="boe-bubble-content relative z-10 pt-[500rem]">
						<img class="boe-bubble-gen slide-up transform-gpu w-[482rem] h-[122rem] mx-auto"
							src="./images/gen_2_01.png" />
						<img class="boe-bubble-title slide-up transform-gpu w-[855rem] h-[126rem] mx-auto mt-[130rem]"
							src="./images/gen_2_02.png" />
						<div class="boe-bubble-icons flex justify-center mt-[130rem] mb-[100rem] space-x-[60rem]">
							<div class="slide-up transform-gpu">
								<img class="w-[174rem] h-[113rem] aspect-auto mx-auto" src="./images/icon_mbl.png" />
								<div class="text-center text-[#0fe5fe] text-[60rem]">MBL</div>
							</div>
							<div class="slide-up transform-gpu">
								<img class="w-[174rem] h-[113rem] aspect-auto mx-auto" src="./images/icon_nb.png" />
								<div class="text-center text-[#0fe5fe] text-[60rem]">NB</div>
							</div>
							<div class="slide-up transform-gpu">
								<img class="w-[174rem] h-[113rem] aspect-auto mx-auto" src="./images/icon_tpc.png" />
								<div class="text-center text-[#0fe5fe] text-[60rem]">TPC</div>
							</div>
						</div>
						<div
							class="boe-bubble-description slide-up transform-gpu text-center text-[#3cb2ff] text-[48rem] mb-[20rem]">
							ADS技术全面应用到中小尺寸产品</div>
						<div class="boe-bubble-description slide-up transform-gpu text-center text-[#3cb2ff] text-[48rem]">
							实现视网膜级PPI产品
						</div>
					</div>
				</div>
			</div>
			<div class="boe-params slide-up flex space-x-[28rem] justify-center -mt-[80rem]">
				<div class="flex flex-grow-0 flex-shrink-0 flex-col space-y-[18rem]">
					<img class="slide-up w-[602rem] h-[182rem]" src="./images/gen_2_03.png" />
					<img class="slide-up w-[602rem] h-[182rem]" src="./images/gen_2_04.png" />
				</div>
				<div class="flex flex-grow-0 flex-shrink-0">
					<img class="slide-up w-[233rem] h-[380rem]" src="./images/gen_2_06.png" />
				</div>
				<div class="flex flex-grow-0 flex-shrink-0 flex-col space-y-[18rem]">
					<img class="slide-up w-[602rem] h-[182rem]" src="./images/gen_2_05.png" />
					<img class="slide-up w-[602rem] h-[182rem]" src="./images/gen_2_07.png" />
				</div>
			</div>
			<img src="./images/light_01.png"
				class="boe-light slide-up transform-gpu w-[1500rem] h-[493rem] mx-auto relative z-10 max-w-[none] block -mt-[190rem] mix-blend-plus-lighter" />
			<div
				class="boe-description slide-up transform-gpu text-[#70cafe] text-center text-[36rem] mb-[40rem] -mt-[150rem] ">
				MBL/TPC：分辨率越来越高，尺寸越来越大</div>
			<div class="boe-description slide-up transform-gpu text-[#FFFFFF] text-center text-[36rem] mb-[40rem]">
				iPhone4/iPad with Retina
				Display，Galaxy Note
				5.3/5.68，iPad 2K、Galaxy Note 10.1英寸 2.5K、</div>
			<div class="boe-description slide-up transform-gpu text-[#70cafe] text-center text-[36rem] mb-[40rem]">
				NB：上网本、超极本等平板电脑和笔记本崛起</div>
			<div class="boe-description slide-up transform-gpu text-[#FFFFFF] text-center text-[36rem]">Google Chrome
				book
				Pixel</div>
		</div>

		<div id="gen3" class="w-[2160rem] h-[3840rem] flex-shrink-0 flex-grow-0 basis-[2160rem] relative pt-[160rem]  z-10">
			<div class="space-y-[40rem] text-center text-[36rem]">
				<div class="boe-description slide-up transform-gpu text-[#70cafe]">TV：尺寸变大（＞42寸），分辨率成倍提升（ HD→FHD→UHD ）
				</div>
				<div class="boe-description slide-up transform-gpu text-[#FFFFFF]">Philips 42 FHD 2D/3D、LG/Philips 55
					FHD
					LCD、Samsung
					40/46/52 FHD LCDs</div>
				<div class="boe-description slide-up transform-gpu text-[#FFFFFF]">LG/AUO/Sharp 47/55/84 4K 2D/3D TV
				</div>
			</div>
			<img src="./images/light_01.png"
				class="boe-light slide-up transform-gpu w-[1500rem] h-[493rem] mx-auto relative z-10 max-w-[none] block -mt-[190rem] mix-blend-plus-lighter" />
			<div class="boe-params flex space-x-[28rem] justify-center -mt-[90rem]">
				<div class="flex flex-grow-0 flex-shrink-0 flex-col space-y-[18rem]">
					<img class="slide-up transform-gpu w-[602rem] h-[182rem]" src="./images/gen_3_03.png" />
					<img class="slide-up transform-gpu w-[602rem] h-[182rem]" src="./images/gen_3_04.png" />
				</div>
				<div class="flex flex-grow-0 flex-shrink-0">
					<img class="slide-up transform-gpu w-[233rem] h-[380rem]" src="./images/gen_2_06.png" />
				</div>
				<div class="flex flex-grow-0 flex-shrink-0 flex-col space-y-[18rem]">
					<img class="slide-up transform-gpu w-[602rem] h-[182rem]" src="./images/gen_3_05.png" />
					<img class="slide-up transform-gpu w-[602rem] h-[182rem]" src="./images/gen_3_06.png" />
				</div>
			</div>

			<div id="bubble-3" class="animate-bubble">
				<div class="boe-bubble slide-up transform-gpu relative w-[2160rem] h-[1945rem] -mt-[100rem] cursor-pointer">
					<div class="absolute left-0 top-0 bottom-0 right-0 bg-[url('./images/circle_dark.png')] bg-cover opacity-100">
					</div>
					<div
						class="boe-bubble-lightring absolute  -left-[170rem] w-[2500rem] h-[1200rem] -bottom-[220rem]  bg-[url('./images/light_ring_2.png')] bg-contain mix-blend-lighten opacity-0">
					</div>
					<div class="boe-bubble-content relative z-10 pt-[500rem]">
						<img class="boe-bubble-gen slide-up transform-gpu w-[482rem] h-[122rem] mx-auto"
							src="./images/gen_3_01.png" />
						<img class="boe-bubble-title slide-up transform-gpu w-[758rem] h-[127rem] mx-auto mt-[130rem]"
							src="./images/gen_3_02.png" />
						<div class="boe-bubble-icons flex justify-center mt-[130rem] mb-[100rem] space-x-[60rem]">
							<div class="slide-up transform-gpu ">
								<img class="w-[174rem] h-[113rem] aspect-auto mx-auto" src="./images/icon_nb.png" />
								<div class="text-center text-[#0fe5fe] text-[60rem]">NB</div>
							</div>
							<div class="slide-up transform-gpu ">
								<img class="w-[174rem] h-[113rem] aspect-auto mx-auto" src="./images/icon_mnt.png" />
								<div class="text-center text-[#0fe5fe] text-[60rem]">MNT</div>
							</div>
							<div class="slide-up transform-gpu ">
								<img class="w-[174rem] h-[113rem] aspect-auto mx-auto" src="./images/icon_tv.png" />
								<div class="text-center text-[#0fe5fe] text-[60rem]">TV</div>
							</div>
						</div>
						<div
							class="boe-bubble-description slide-up transform-gpu text-center text-[#3cb2ff] text-[48rem] mb-[20rem]">
							ADS产品分辨率不断突破，</div>
						<div class="boe-bubble-description slide-up transform-gpu text-center text-[#3cb2ff] text-[48rem]">
							实现
							UHD级分辨率产品</div>
					</div>
				</div>
			</div>
		</div>

		<div id="gen4" class="w-[2160rem] h-[3840rem] flex-shrink-0 flex-grow-0 basis-[2160rem] relative pt-[10rem] z-10">
			<div id="bubble-4" class="animate-bubble">
				<div class="boe-bubble relative opacity-100 w-[2160rem] h-[1945rem] cursor-pointer">
					<div
						class="slide-up transform-gpu absolute left-0 top-0 bottom-0 right-0 bg-[url('./images/circle_dark.png')] bg-cover opacity-100  ">
					</div>
					<div
						class="boe-bubble-lightring absolute  -left-[170rem] w-[2500rem] h-[1200rem] -bottom-[220rem]  bg-[url('./images/light_ring_2.png')] bg-contain mix-blend-lighten opacity-0">
					</div>
					<div class="boe-bubble-content relative z-10 pt-[500rem]">
						<img class="boe-bubble-gen slide-up transform-gpu w-[482rem] h-[122rem] mx-auto"
							src="./images/gen_4_01.png" />
						<img class="boe-bubble-title slide-up transform-gpu w-[1219rem] h-[245rem] mx-auto mt-[130rem]"
							src="./images/gen_4_02.png" />
						<div class="boe-bubble-icons flex justify-center mt-[130rem] mb-[100rem] space-x-[60rem]">
							<div class="slide-up transform-gpu ">
								<img class="w-[174rem] h-[113rem] aspect-auto mx-auto" src="./images/icon_mbl.png" />
								<div class="text-center text-[#0fe5fe] text-[60rem]">MBL</div>
							</div>
							<div class="slide-up transform-gpu ">
								<img class="w-[174rem] h-[113rem] aspect-auto mx-auto" src="./images/icon_nb.png" />
								<div class="text-center text-[#0fe5fe] text-[60rem]">NB</div>
							</div>
							<div class="slide-up transform-gpu ">
								<img class="w-[174rem] h-[113rem] aspect-auto mx-auto" src="./images/icon_tpc.png" />
								<div class="text-center text-[#0fe5fe] text-[60rem]">TPC</div>
							</div>
							<div class="slide-up transform-gpu ">
								<img class="w-[174rem] h-[113rem] aspect-auto mx-auto" src="./images/icon_mnt.png" />
								<div class="text-center text-[#0fe5fe] text-[60rem]">MNT</div>
							</div>
							<div class="slide-up transform-gpu ">
								<img class="w-[174rem] h-[113rem] aspect-auto mx-auto" src="./images/icon_tv.png" />
								<div class="text-center text-[#0fe5fe] text-[60rem]">TV</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="boe-params flex space-x-[28rem] justify-center -mt-[80rem]">
				<div class="flex flex-grow-0 flex-shrink-0 flex-col space-y-[18rem]">
					<img class="slide-up transform-gpu w-[602rem] h-[182rem]" src="./images/gen_4_03.png" />
					<img class="slide-up transform-gpu w-[602rem] h-[182rem]" src="./images/gen_4_04.png" />
				</div>
				<div class="flex flex-grow-0 flex-shrink-0">
					<img class="slide-up transform-gpu w-[233rem] h-[380rem]" src="./images/gen_4_07.png" />
				</div>
				<div class="flex flex-grow-0 flex-shrink-0 flex-col space-y-[18rem]">
					<img class="slide-up transform-gpu w-[602rem] h-[182rem]" src="./images/gen_4_05.png" />
					<img class="slide-up transform-gpu w-[602rem] h-[182rem]" src="./images/gen_4_06.png" />
				</div>
			</div>
			<img src="./images/light_01.png"
				class="boe-light slide-up transform-gpu w-[1500rem] h-[493rem] mx-auto relative z-10 max-w-[none] block -mt-[160rem] mix-blend-plus-lighter" />
			<div class="text-center text-[36rem] space-y-[40rem] -mt-[150rem]">
				<div class="boe-description slide-up transform-gpu text-[#70cafe]">ADS 升级为 ADS Pro 高端 LCD显示技术解决方案，
				</div>
				<div class="boe-description slide-up transform-gpu text-[#70cafe]">全方位满足消费者对于完美画质、超高刷新等高端化视觉需求，</div>
				<div class="boe-description slide-up transform-gpu text-[#70cafe]">以及宽频低碳、超薄全面屏等应用需求
				</div>
			</div>
		</div>

		<div id="mainProduct"
			class="absolute bottom-0 left-0 right-0 flex justify-center space-x-[100rem] pl-[1050rem] pb-[150rem]">
			<div
				class="main-product-item transform-gpu translate-y-[1000rem] relative w-[971rem] h-[664rem] bg-[url('./images/bg_product.png')] bg-cover p-[50rem]">
				<div class="relative z-10 space-y-[40rem]">
					<div class="text-[60rem] text-center text-[#ffffff]">高速运动画面处理</div>
					<img class="w-[864rem] h-[334rem] object-cover" src="./images/products/product_01.png" />
					<div class="flex">
						<div class="flex-1 text-[#ffffff] text-[30rem] text-center">ADSDS</div>
						<div class="flex-1 text-[#ffffff] text-[30rem] text-center">Normal</div>
					</div>
				</div>
			</div>
			<div
				class="main-product-item transform-gpu translate-y-[1000rem] relative w-[971rem] h-[664rem] bg-[url('./images/bg_product.png')] bg-cover p-[50rem]">
				<div class="relative z-10 space-y-[40rem]">
					<div class="text-[60rem] text-center text-[#ffffff]">硬屏+</div>
					<img class="w-[864rem] h-[334rem] object-cover" src="./images/products/product_02.png" />
					<div class="flex">
						<div class="flex-1 text-[#ffffff] text-[30rem] text-center">ADSDS</div>
						<div class="flex-1 text-[#ffffff] text-[30rem] text-center">Normal</div>
					</div>
				</div>
			</div>
			<div
				class="main-product-item transform-gpu translate-y-[1000rem] relative w-[971rem] h-[664rem] bg-[url('./images/bg_product.png')] bg-cover p-[50rem]">
				<div class="relative z-10 space-y-[40rem]">
					<div class="text-[60rem] text-center text-[#ffffff]">超宽视角</div>
					<img class="w-[864rem] h-[334rem] object-cover" src="./images/products/product_03.png" />
					<div class="flex">
						<div class="flex-1 text-[#ffffff] text-[30rem] text-center">>178°</div>

					</div>
				</div>
			</div>
			<div
				class="main-product-item transform-gpu translate-y-[1000rem] relative w-[971rem] h-[664rem] bg-[url('./images/bg_product.png')] bg-cover p-[50rem]">
				<div class="relative z-10 space-y-[40rem]">
					<div class="text-[60rem] text-center text-[#ffffff]">超高色彩表现力</div>
					<img class="w-[864rem] h-[334rem] object-cover" src="./images/products/product_04.png" />
					<div class="flex">
						<div class="flex-1 text-[#ffffff] text-[30rem] text-center">ADSDS</div>
						<div class="flex-1 text-[#ffffff] text-[30rem] text-center">Normal</div>
					</div>
				</div>
			</div>
			<div
				class="main-product-item transform-gpu translate-y-[1000rem] relative w-[971rem] h-[664rem] bg-[url('./images/bg_product.png')] bg-cover p-[50rem]">
				<div class="relative z-10 space-y-[40rem]">
					<div class="text-[60rem] text-center text-[#ffffff]">低能耗</div>
					<img class="w-[864rem] h-[334rem] object-cover" src="./images/products/product_05.png" />
					<div class="flex">
						<div class="flex-1 text-[#ffffff] text-[30rem] text-center">>BOE Solution</div>
						<div class="flex-1 text-[#ffffff] text-[30rem] text-center">>Normal Solution</div>
					</div>
				</div>
			</div>
		</div>


		<!-- gen1 焦点内容 -->
		<div id="gen1-focus" class="transform-gpu absolute w-full h-full   z-20 opacity-[0.001] pointer-events-none">
			<!-- gen1 产品列表 -->
			<div id="gen1-prods"
				class="absolute left-0 right-0 bottom-0 h-[1000rem] bg-[url('./images/bg_line.png')] bg-cover flex items-center justify-center space-x-[400rem]">
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[100rem]">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_1_prod_01.png">
					<div class="text-center text-[36rem] text-[#ffffff]">多点触控技术（2009）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[100rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_1_prod_02.png">
					<div class="text-center text-[36rem] text-[#ffffff]">2.8”全视角屏（2010）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[100rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_1_prod_03.png">
					<div class="text-center text-[36rem] text-[#ffffff]">4.3 GOA（2011）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[100rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_1_prod_04.png">
					<div class="text-center text-[36rem] text-[#ffffff]">19 GOA（2012）</div>
				</div>
			</div>
			<div class="absolute left-[4350rem] top-[200rem]">
				<!-- gen1 详情 1 -->
				<div class="relative w-[2079rem] h-[1082rem] p-[41rem]  bg-[url('./images/gen_1_bg_01.png')] bg-cover">
					<div class="relative w-full h-full overflow-hidden">
						<div
							class=" absolute z-10 -left-[300rem] top-[50rem] w-[740rem] h-[740rem] bg-[url('./images/btn_bg_02.png')] bg-cover flex flex-col justify-center items-center pl-[80rem]">
							<img class="w-[174rem] h-[113rem]" src="./images/icon_mbl.png" />
							<div class="text-[60rem] text-[#31cbfd] font-bold">MBL</div>
						</div>
						<img class="focus-content-l absolute left-[100rem] top-[100rem] w-[1698rem] h-[831rem]"
							src="./images/products/gen_1_prod_mbl.png" />
					</div>
				</div>
				<!-- gen1 详情 2 -->
				<div
					class="relative w-[2079rem] h-[1082rem] p-[41rem]  bg-[url('./images/gen_1_bg_02.png')] bg-cover mt-[100rem]">
					<div class="relative w-full h-full overflow-hidden">
						<div
							class="absolute z-10 -right-[300rem] top-[50rem] w-[740rem] h-[740rem] bg-[url('./images/btn_bg_02.png')] bg-cover flex flex-col justify-center items-center pr-[80rem]">
							<img class="w-[174rem] h-[113rem]" src="./images/icon_tpc.png" />
							<div class="text-[60rem] text-[#31cbfd] font-bold">TPC</div>
						</div>
						<img class="focus-content-r absolute right-[100rem] top-[100rem] w-[1690rem] h-[753rem]"
							src="./images/products/gen_1_prod_tpc.png" />
					</div>
				</div>
			</div>
		</div>

		<!-- gen2 焦点内容 -->
		<div id="gen2-focus" class="transform-gpu absolute w-full h-full   z-20 opacity-[0.001] pointer-events-none">
			<!-- gen2 产品列表 -->
			<div id="gen2-prods"
				class="absolute left-0 right-0 bottom-0 h-[1000rem] bg-[url('./images/bg_line.png')] bg-cover flex items-center justify-center space-x-[200rem]">
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem]">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_2_prod_01.png">
					<div class="text-center text-[36rem] text-[#ffffff]">In-cell-Touch </div>
					<div class="text-center text-[36rem] text-[#ffffff]">5 In cell TSP（2013）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_2_prod_02.png">
					<div class="text-center text-[36rem] text-[#ffffff]">Full in Cell + TDDI</div>
					<div class="text-center text-[36rem] text-[#ffffff]">5.3HD/5.5HD TDDI（2016）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] relative left-[100rem]">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_2_prod_03.png">
					<div class="text-center text-[36rem] text-[#ffffff]">773PPI</div>
					<div class="text-center text-[36rem] text-[#ffffff]">5.7 UHD TDDI（2017）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] relative -left-[120rem]">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_2_prod_04.png">
					<div class="text-center text-[36rem] text-[#ffffff]">Adobe 100%</div>
					<div class="text-center text-[36rem] text-[#ffffff]">8 WUXGA（2015）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] relative -left-[180rem]">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_2_prod_05.png">
					<div class="text-center text-[36rem] text-[#ffffff]">300PPI</div>
					<div class="text-center text-[36rem] text-[#ffffff]">10.1” WQXGA 300PPI（2015）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_2_prod_06.png">
					<div class="text-center text-[36rem] text-[#ffffff]">350 PPI</div>
					<div class="text-center text-[36rem] text-[#ffffff]">12.5 UHD NB（2018）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_2_prod_07.png">
					<div class="text-center text-[36rem] text-[#ffffff]">640PPI</div>
					<div class="text-center text-[36rem] text-[#ffffff]">13.3 8K（2018）</div>
				</div>
			</div>
			<div class="absolute left-[2230rem] top-[200rem]">
				<!-- gen2 详情 -->
				<div class="relative w-[4177rem] h-[2279rem] p-[41rem] bg-[url('./images/gen_2_bg_01.png')] bg-cover">
					<div class="relative w-full h-full overflow-hidden">
						<div
							class=" absolute z-10 -left-[250rem] top-[100rem] w-[740rem] h-[740rem] bg-[url('./images/btn_bg_02.png')] bg-cover flex flex-col justify-center items-center">
							<img class="w-[174rem] h-[113rem]" src="./images/icon_mbl.png" />
							<div class="text-[60rem] text-[#31cbfd] font-bold">MBL</div>
						</div>
						<div
							class=" absolute z-10 left-[1400rem] -bottom-[300rem] w-[740rem] h-[740rem] bg-[url('./images/btn_bg_02.png')] bg-cover flex flex-col justify-center items-center pb-[110rem]">
							<img class="w-[174rem] h-[113rem]" src="./images/icon_tpc.png" />
							<div class="text-[60rem] text-[#31cbfd] font-bold">TPC</div>
						</div>
						<div
							class="absolute z-10 -right-[250rem] bottom-[380rem] w-[740rem] h-[740rem] bg-[url('./images/btn_bg_02.png')] bg-cover flex flex-col justify-center items-center">
							<img class="w-[174rem] h-[113rem]" src="./images/icon_nb.png" />
							<div class="text-[60rem] text-[#31cbfd] font-bold">NB</div>
						</div>
						<img class="focus-content-l absolute left-[735rem] top-[100rem] w-[3295rem] h-[825rem] object-contain"
							src="./images/products/gen_2_prod_mbl.png" />
						<img class="focus-content-b absolute left-[105rem] bottom-[100rem] w-[1888rem] h-[1022rem] object-contain"
							src="./images/products/gen_2_prod_tpc.png" />
						<img class="focus-content-r absolute right-[260rem] bottom-[100rem] w-[1655rem] h-[1024rem] object-contain"
							src="./images/products/gen_2_prod_nb.png" />
					</div>
				</div>
			</div>
		</div>

		<!-- gen3 焦点内容 -->
		<div id="gen3-focus" class="absolute w-full h-full   z-20 opacity-[0.001] pointer-events-none">
			<!-- gen3 产品列表 -->
			<div id="gen3-prods"
				class="absolute left-0 right-0 bottom-0 h-[1000rem] bg-[url('./images/bg_line.png')] bg-cover flex items-center justify-center space-x-[430rem] pr-[1000rem]">
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem]">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_3_prod_01.png">
					<div class="text-center text-[36rem] text-[#ffffff]">10K </div>
					<div class="text-center text-[36rem] text-[#ffffff]">82 10K（2015）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_3_prod_02.png">
					<div class="text-center text-[36rem] text-[#ffffff]">8K 10bit 105%NTSC HDR</div>
					<div class="text-center text-[36rem] text-[#ffffff]">65”8K BVIII TV （2016）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_3_prod_03.png">
					<div class="text-center text-[36rem] text-[#ffffff]">8K 120Hz</div>
					<div class="text-center text-[36rem] text-[#ffffff]">75 8K 120Hz（2017）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_3_prod_04.png">
					<div class="text-center text-[36rem] text-[#ffffff]">8K CR160000</div>
					<div class="text-center text-[36rem] text-[#ffffff]">65 8K BD Cell（2019）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_3_prod_05.png">
					<div class="text-center text-[36rem] text-[#ffffff]">8K 100% Adobe</div>
					<div class="text-center text-[36rem] text-[#ffffff]">27 8K（2017）</div>
				</div>
			</div>
			<div class="absolute left-[2230rem] top-[200rem]">
				<!-- gen3 详情 -->
				<div class="relative w-[4179rem] h-[2278rem] p-[41rem] bg-[url('./images/gen_3_bg_01.png')] bg-cover ">
					<div class="relative w-full h-full rounded-br-[180rem] overflow-hidden">
						<div
							class="absolute z-10  -left-[250rem] top-[100rem] w-[740rem] h-[740rem] bg-[url('./images/btn_bg_02.png')] bg-cover flex flex-col justify-center items-center">
							<img class="w-[174rem] h-[113rem]" src="./images/icon_tv.png" />
							<div class="text-[60rem] text-[#31cbfd] font-bold">TV</div>
						</div>
						<div
							class="absolute z-10 -right-[240rem] -bottom-[240rem] w-[740rem] h-[740rem] bg-[url('./images/btn_bg_02.png')] bg-cover flex flex-col justify-center items-center pb-[50rem]">
							<img class="w-[174rem] h-[113rem]" src="./images/icon_mnt.png" />
							<div class="text-[60rem] text-[#31cbfd] font-bold">MNT</div>
						</div>
						<img class="focus-content-l absolute left-[145rem] top-[180rem] w-[1480rem] h-[1893rem] object-contain"
							src="./images/products/gen_3_prod_tv.png" />
						<img class="focus-content-r absolute right-[137rem] top-[180rem] w-[2358rem] h-[1862rem] object-contain"
							src="./images/products/gen_3_prod_mnt.png" />
					</div>
				</div>
			</div>
		</div>

		<!-- gen4 焦点内容 -->
		<div id="gen4-focus" class="absolute w-full h-full z-20 pointer-events-none opacity-[0.001]">
			<!-- gen4 产品列表 -->
			<div id="gen4-prods"
				class="absolute left-0 right-0 bottom-0 h-[1000rem] bg-[url('./images/bg_line.png')] bg-cover flex items-center justify-center space-x-[80rem]">
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem]">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_4_prod_01.png">
					<div class="text-center text-[36rem] text-[#ffffff]">FHD 144Hz NTSC 108% </div>
					<div class="text-center text-[36rem] text-[#ffffff]">7.09 FHD 144Hz</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_4_prod_02.png">
					<div class="text-center text-[36rem] text-[#ffffff]">3.2K高画质 120Hz</div>
					<div class="text-center text-[36rem] text-[#ffffff]">12.7 3.2K 120Hz TPC（2023）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_4_prod_03.png">
					<div class="text-center text-[36rem] text-[#ffffff]">5Hz~144Hz宽频</div>
					<div class="text-center text-[36rem] text-[#ffffff]">5Hz~144Hz宽频长续航（2023）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_4_prod_04.png">
					<div class="text-center text-[36rem] text-[#ffffff]">3K 高画质 1Hz~120Hz宽频</div>
					<div class="text-center text-[36rem] text-[#ffffff]">14.5 3K 1~120Hz MNT（2023）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_4_prod_05.png">
					<div class="text-center text-[36rem] text-[#ffffff]">FHD 1000Hz</div>
					<div class="text-center text-[36rem] text-[#ffffff]">27”FHD 1000Hz（2022）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_4_prod_06.png">
					<div class="text-center text-[36rem] text-[#ffffff]">HDR 1400</div>
					<div class="text-center text-[36rem] text-[#ffffff]">31.5 4K MLED BLU（2022）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_4_prod_07.png">
					<div class="text-center text-[36rem] text-[#ffffff]">超大尺寸 8K 120Hz</div>
					<div class="text-center text-[36rem] text-[#ffffff]">110 8K 120Hz TV（2020）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_4_prod_08.png">
					<div class="text-center text-[36rem] text-[#ffffff]">4K 576Hz 超高刷新</div>
					<div class="text-center text-[36rem] text-[#ffffff]">75 4K 576Hz TV（2021）</div>
				</div>
				<div class="product-item transform-gpu translate-y-[1000rem] space-y-[50rem] ">
					<img class="object-contain w-[650rem] h-[480rem]" src="./images/products/gen_4_prod_09.png">
					<div class="text-center text-[36rem] text-[#ffffff]">超大尺寸 16K 3D</div>
					<div class="text-center text-[36rem] text-[#ffffff]">110 16K 3D TV（2023）</div>
				</div>
			</div>
			<div class="absolute left-[2230rem] top-[200rem]">
				<!-- gen4 详情 1-->
				<div class="relative w-[6281rem] h-[1081rem] p-[42rem] bg-[url('./images/gen_4_bg_01.png')] bg-cover">
					<div class="relative w-full h-full overflow-hidden">
						<div
							class="absolute z-10 -left-[300rem] top-[100rem] w-[740rem] h-[740rem] bg-[url('./images/btn_bg_02.png')] bg-cover flex flex-col justify-center items-center">
							<img class="w-[174rem] h-[113rem]" src="./images/icon_mbl.png" />
							<div class="text-[60rem] text-[#31cbfd] font-bold">MBL</div>
						</div>
						<div
							class="absolute z-10 left-[2200rem] -top-[280rem] w-[740rem] h-[740rem] bg-[url('./images/btn_bg_02.png')] bg-cover flex flex-col justify-center items-center pt-[80rem]">
							<img class="w-[174rem] h-[113rem]" src="./images/icon_tpc.png" />
							<div class="text-[60rem] text-[#31cbfd] font-bold">TPC</div>
						</div>
						<div
							class="absolute z-10 -right-[250rem] -top-[250rem] w-[740rem] h-[740rem] bg-[url('./images/btn_bg_02.png')] bg-cover flex flex-col justify-center items-center pt-[50rem]">
							<img class="w-[174rem] h-[113rem]" src="./images/icon_tv.png" />
							<div class="text-[60rem] text-[#31cbfd] font-bold">TV</div>
						</div>
						<div class="flex justify-between pl-[370rem] pr-[100rem] mt-[140rem] ">
							<div class="focus-content-l flex flex-col justify-between items-center relative z-0">
								<img class="w-[1568rem] h-[757rem] object-contain" src="./images/products/gen_4_prod_mbl.png" />
							</div>
							<div class="focus-content-t flex flex-col justify-between items-center relative z-0">
								<img class=" w-[1559rem] h-[722rem] object-contain" src="./images/products/gen_4_prod_tpc.png" />
							</div>
							<div class="focus-content-r flex flex-col justify-between items-center pl-[140rem] relative z-0">
								<img class=" w-[1823rem] h-[758rem]" src="./images/products/gen_4_prod_tv.png" />
							</div>
						</div>
					</div>
				</div>
				<!-- gen4 详情 2-->
				<div
					class="relative w-[6281rem] h-[1081rem] p-[42rem] mt-[140rem] bg-[url('./images/gen_4_bg_02.png')] bg-cover">
					<div class="relative w-full h-full overflow-hidden">
						<div
							class="absolute z-10 -left-[250rem] -bottom-[250rem] w-[740rem] h-[740rem] bg-[url('./images/btn_bg_02.png')] bg-cover flex flex-col justify-center items-center">
							<img class="w-[174rem] h-[113rem]" src="./images/icon_nb.png" />
							<div class="text-[60rem] text-[#31cbfd] font-bold">NB</div>
						</div>
						<div
							class="absolute z-10 left-[3400rem] -top-[280rem] w-[740rem] h-[740rem] bg-[url('./images/btn_bg_02.png')] bg-cover flex flex-col justify-center items-center pt-[80rem]">
							<img class="w-[174rem] h-[113rem]" src="./images/icon_mnt.png" />
							<div class="text-[60rem] text-[#31cbfd] font-bold">MNT</div>
						</div>
						<div class="flex justify-between pl-[340rem] pr-[330rem] mt-[140rem] relative z-0">
							<div class="focus-content-l flex flex-col justify-between items-center">
								<img class="w-[2463rem] h-[702rem] object-contain" src="./images/products/gen_4_prod_nb.png" />
							</div>
							<div class="focus-content-t flex flex-col justify-between items-center">
								<img class="w-[2576rem] h-[678rem] object-contain" src="./images/products/gen_4_prod_mnt.png" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>